<template>
	<view>
	<u-navbar title="我的挂售" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
		leftIconColor="#666" titleStyle="color:#333" bgColor="#10191F" rightText="" @rightClick="right"
		@leftClick="leftClick"></u-navbar>


		<view class="main">
			<view class="tit">
				我的挂售
				<!-- <text></text> -->
			</view>
				
			<view class="wrap">
				<view class="wrapitem" @click="selitem(item)"   v-for="item in selllist" :key="item.id">
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">		
								<image  class="logo" :src="item.car_logo" mode=""></image>
						<image  v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image  v-if="item.level==2"  class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image  v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image  class="image"  :src="item.images" mode=""></image>
					</view>
					<text  v-if="item.level==1"  class="text1" >{{item.name}}</text>
					<text  v-if="item.level==2"  class="text2" >{{item.name}}</text>
					<text  v-if="item.level==3"  class="text3" >{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="selllist" :status="status"  :showMore="false"></noDatas>
		</view>
		<u-popup :show="show" mode="center" @close="show=false" bgColor="transparent">
			<view class="wrap2">
				<view class="wrapitem2">
					<view class="imgwrap2">
						<image class="logo2" :src="items.car_logo" mode=""></image>
						<image v-if="items.level==3" class="bg2" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="items.level==2" class="bg2" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="items.level==1" class="bg2" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image2" :src="items.images" mode=""></image>
					</view>
					<text v-if="items.level==1" class="text11">{{items.name}}</text>
					<text v-if="items.level==2" class="text12">{{items.name}}</text>
					<text v-if="items.level==3" class="text13">{{items.name}}</text>
					<view class="price2">
						零售价：{{items.price}}
					</view>
					<view class="btn2" @click="show=false">
						确定
					</view>
				</view>
			</view>
		
		</u-popup>
	</view>
	
</template>

<script>
	import {buyAccessoryGroup,sellAccessoryGroup,hallList,carindex} from "../../api/mycar.js"
	export default {
		data() {
			return {
				selllist:[],
				page: 1,
				size: 30,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				show:false,
				items:{}
				
			}
		},
		onLoad() {
			this.getselllist()
		},
		methods: {
			selitem(item) {
					
					this.show = true
					this.items = item
				
				
				
			},
			getselllist(){
				sellAccessoryGroup({
					page:this.page
				}).then(res=>{
				
					if (res.code == 1) {
						let list = res.data.data;
						this.selllist = this.page == 1 ? list : this.selllist.concat(list);
						// console.log(this.goodlist2);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					
				})
			},
			leftClick() {
				//获取页面栈的长度
				uni.navigateBack()
				
			},
		},
		onReachBottom() {
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.getselllist()
				}
		},
	}
</script>
<style>
	page{
		background: #10191F !important;
	}
</style>
<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
/deep/ .u-navbar__content__title{
	color: #fff !important;
}
/deep/.uicon-arrow-left{
	color: #fff !important;
}
/deep/ .u-navbar__content__right__text{
	color: #fff !important;
}
.main{
	width: 690rpx;
	min-height: 502rpx;
	box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	padding-bottom: 30rpx;
	.tit{
		width: 690rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		padding-top: 30rpx;
		position: relative;
		>text{
			position: absolute;
			right: 20rpx;
			top: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255,255,255,0.8);
		}
	}
	.wrap{
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		.wrapitem{
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			 margin-right: 12rpx;
			 margin-top: 20rpx;
			 position: relative;
			 .num{
			 					 position: absolute;
			 					 top: 4rpx;
			 					 right: 4rpx;
								 z-index: 9;
								 width: 40rpx;
								 height: 30rpx;
								 background: #000000;
								 border-radius: 8rpx 8rpx 8rpx 8rpx;
								 // opacity: 0.7;
								 font-weight: 500;
								 font-size: 26rpx;
								 color: #FFFFFF;
								 text-align: center;
								 line-height: 30rpx;
			 }
			 .imgwrap{
				 width: 128rpx;
				 height: 128rpx;
				 position: relative;
				 display: flex;
				 align-items: center;
				 justify-content: center;
					.logo{
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top: 4rpx;
					left: 8rpx;
					border-top-left-radius:8rpx ;
					}
				 .bg{
				 	 width: 128rpx;
				 	 height: 128rpx;
				 	 position: absolute;
					 top: 0rpx;
				  }
				 .image{
				 	transform: translate();
				 	width: 100rpx;
				 	height: 100rpx;
				 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				 }
			 }
			
			.text1{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDBE67;
			}
			.text2{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}
			.text3{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}
	
		
	}
}
	.wrap2 {
		width: 656rpx;
		height: 500rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.wrapitem2 {
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;

			.num2 {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				z-index: 99;
				width: 40rpx;
				height: 30rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: 0.7;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 30rpx;
			}

			.btn2 {
				width: 594rpx;
				height: 80rpx;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			.price2 {
				width: 656rpx;
				text-align: center;
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
				font-family: iconfont2;
				margin-top: 24rpx;
			}

			.imgwrap2 {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo2 {
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top:4rpx;
					left: 20rpx;
					border-top-left-radius: 8rpx;
					
				}

				.bg2 {
					width: 158rpx;
					height: 158rpx;
					position: absolute;
					top: 0rpx;
				}

				.image2 {
					transform: translate();
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}

			.text11 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDBE67;
			}

			.text12 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}

			.text13 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}


	}
</style> 